<template>
	<view class="square-container">
		<view class="tabs">
			<uv-tabs :list="tabList"></uv-tabs>
		</view>
		<!-- 帖子 -->
		<view class="posts-wrapper">
			<view class="post-item" v-for="item in postList" :key="item" @click="toPost(item.id)">
				<view class="post-header">
					<view class="avatar">
						<image :src="item.userVO.avatarUrl" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="name">{{ item.userVO.nickname }}</view>
						<view class="time">{{ item.createTime }}</view>
					</view>
				</view>
				<view class="post-content">
					<view class="title">{{ item.title }}</view>
					<view class="content"> {{ item.content }} </view>
				</view>
				<view class="post-image-list">
					<image :src="item.images[0].url" mode="aspectFill"></image>
					<image :src="item.images[1].url" mode="aspectFill"></image>
					<image :src="item.images[2].url" mode="aspectFill"></image>
				</view>
				<view class="post-footer">
					<view class="post-footer-item location">
						<uv-icon name="map" size="18" color="#666"></uv-icon>
						<view class="text">广州</view>
					</view>
					<view class="post-footer-item like">
						<uv-icon name="heart" size="18" color="#666"></uv-icon>
						<view class="text">100</view>
					</view>
					<view class="post-footer-item comment">
						<uv-icon name="chat" size="18" color="#666"></uv-icon>
						<view class="text">42</view>
					</view>
				</view>
			</view>
		</view>
		<!-- Tabbar -->
		<Tabbar :active="3"></Tabbar>
	</view>
</template>

<script>
import request from '@/api/http.js';

export default {
	data() {
		return {
			tabList: [
				{
					name: '推荐'
				},
				{
					name: '热门'
				},
				{
					name: '附件'
				},
				{
					name: '关注'
				}
			],
			postList: []
		};
	},
	onShow() {
		this.handleGetPostList();
	},
	methods: {
		toPost(id) {
			uni.navigateTo({ url: `/pages/post/post?id=${id}` });
		},
		async handleGetPostList() {
			const res = await request(`/forum/page?thisuser=0`);
			this.postList = res.data.list;
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f9fafb;
}
.square-container {
	padding: 0 20rpx;

	.tabs {
		margin-bottom: 20rpx;
		background-color: #fff;

		.uv-tabs {
			padding: 20rpx 0;
		}
	}

	.posts-wrapper {
		.post-item {
			background-color: #fff;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.post-header {
				display: flex;
				align-items: center;

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					margin-left: 20rpx;

					.name {
						font-size: 32rpx;
						font-weight: bold;
					}

					.time {
						font-size: 24rpx;
						color: #999;
					}
				}
			}

			.post-content {
				margin-top: 20rpx;

				.title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.content {
					font-size: 28rpx;
					color: #666;
					margin-top: 10rpx;
					// 三行
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.post-image-list {
				width: 100%;
				display: flex;
				flex: 1;
				margin-top: 20rpx;
				gap: 10rpx;

				image {
					height: 200rpx;
					margin-bottom: 10rpx;
					border-radius: 25rpx;
				}
			}

			.post-footer {
				display: flex;
				align-items: center;
				margin-top: 1em;

				&-item {
					display: flex;
					align-items: center;

					.text {
						margin-left: 10rpx;
						font-size: 28rpx;
						color: #666;
					}
				}

				.location {
					margin-right: auto;
				}

				.like {
					margin-right: 20rpx;
				}

				.comment {
					margin-right: 20rpx;
				}
			}
		}
	}
}
</style>
